const { useState, useEffect } = React;
const { Button, Space, Input, Tag, List, Typography, message, Modal, Form, Table } = antd;


const PromptList = ({ prompts, onEdit, onOptEdit, onDelete }) => {
  const [selectedTags, setSelectedTags] = useState([]);

  const onCopy = (record)=>{
    prn(record.content)

    $.copyToClipboard(record.content)
  }

  const onFilterClick = (tag) =>{
    setSelectedTags([tag])
  }

  const columns = [
    {
      title: 'Id',
      dataIndex: 'id',
      key: 'id',
      width: 20,
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 200,
    },
    {
      title: 'Content',
      dataIndex: 'content',
      key: 'content',
      width: 900,
      render: content => <div> { _.truncate(content, {length:100}) } </div>
    },
    {
      title: 'Tags',
      dataIndex: 'tags',
      key: 'tags',
      render: tags => tags? tags.map(tag => <Tag key={tag}>{tag}</Tag>) : <div />
    },
    {
      title: 'Action',
      key: 'action',
      render: (_, record) => (
        <Space>
          <Button type='link' onClick={() => onCopy(record)}>Copy</Button>
          <Button type='link' onClick={() => onEdit(record)}>Edit</Button>
          <Button type='link' onClick={() => onOptEdit(record)}>EditOpt</Button>
          <Button danger onClick={() => onDelete(record.id)}>Delete</Button>
        </Space>
      )
    }
  ];

  const renderItem = (item, index) => {
    return (
      <Col span={3}>
        <Button type='link' onClick={()=>{onFilterClick(item)}} >{item}</Button>
      </Col>
    )
  };

  return (
    <>
      <div style={{ marginBottom: 16 }}>


    <Row type="flex" justify="start" align="middle" style={{ padding: '3px' }}>
      <Col span={12}>
        <Select mode="multiple"placeholder="Filter by tags"value={selectedTags}
          onChange={setSelectedTags}
          style={{ width: 200 }}
          options={[...new Set(prompts.flatMap(p => p.tags))].map(tag => ({
            value: tag,
            label: tag
          }))}
        />
      </Col>
      {
        // [
        //   '小说作家', '作家练笔', '写作基础', '小说创作'
        // ].map(renderItem)

        [...new Set(prompts.flatMap(p => p.tags))].map(renderItem)
      }
    </Row>

      </div>
      <Table
        dataSource={prompts.filter(p => 
          selectedTags.length === 0 || 
          selectedTags.every(tag => p.tags? p.tags.includes(tag) : '')
        )}
        columns={columns}
        rowKey="id"
      />
    </>
  );
};
